<template>
  <div class="brand">
    <!-- 列表-下拉加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="list">
        <router-link tag="div" :to="`/home/brand/brandInfo?id=${item.id}`" class="item" v-for="item in list" :key="item.id">
          <img :src="item.app_list_pic_url" alt="">
          <div class="info">
            {{item.name}} | {{item.floor_price}}元起
          </div>
        </router-link>
      </div>
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/home/brand";
export default {
  data() {
    return {
      page: 1, // 品牌制造商的列表传递参数
      list: [],
      loading: false,
      finished: false,
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {},
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 下拉加载
    onLoad() {
      // 首页品牌制造商直供的详情内的列表数据
      listaction({
        page: this.page,
      }).then((res) => {
        this.list.push(...res.data.data);
        // 加载状态结束
        this.loading = false;
        this.page++;
        // 判断当前页数是否 > 总页数
        if (this.page > res.data.total) {
          // 数据全部加载完成
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.brand {
  .list {
    .item {
      width: 100%;
      height: 210px;
      position: relative;
      margin-bottom: 2px;
      img {
        width: 100%;
      }
      .info {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 18px;
        font-weight: bolder;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>